<template>
  <div class="lin-container">
    <div class="lin-wrap">
      <div class="search-box">
        <div>
          <span class="search-title" style="margin-left:20px">行业类型</span>
          <el-select v-model="form.tradeId" placeholder="请选择" @change="handleTrade">
            <el-option
              v-for="item in tradeList"
              :label="item.indexTitle"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
          <span class="search-title">产品类型</span>
          <el-select v-model="form.productId" placeholder="请选择" @change="handleProduct">
            <el-option
              v-for="item in productList"
              :label="item.indexTitle"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </div>

        <!-- <div class="operatiion">
          <el-button type="primary" size="small" @click="search">查询</el-button>
          <el-button size="small" @click="rest">重置</el-button>
        </div>-->
      </div>
      <div class="wrap-label">
        <span class="label">列表</span>
        <div class="operatiion">
          <!-- <el-button type="primary" size="small" @click="openBanner">上传banner</el-button> -->
          <el-button type="primary" size="small" @click="handleClick('新增')">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="No" type="index" width="60"/>
        <el-table-column prop="indexName" label="名称"/>
        <!-- <el-table-column prop="indexContent" label="内容"/> -->
        <el-table-column prop="indexTitle" label="LOGO">
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="returnImage(scope.row.indexTitle)"
              :zoom-rate="1.2"
              fit="cover"
              @click="showBigImage(scope.row.indexTitle)"
            />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="indexImg" label="缩略图">
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="returnImage(scope.row.indexImg)"
              :zoom-rate="1.2"
              fit="cover"
              @click="showBigImage(scope.row.indexImg)"
            />
          </template>
        </el-table-column> -->
        <el-table-column prop="indexSort" label="排序"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick('修改',scope.row)">修改</el-button>
            <el-button link type="danger" plain size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
        <el-form ref="formRules" label-width="120px" :model="form" :rules="formRules">
          <el-form-item label="行业类型" prop="tradeId">
            <el-select v-model="form.tradeId" placeholder="请选择" @change="handleTrade">
              <el-option
                v-for="item in tradeList"
                :label="item.indexTitle"
                :value="item.id"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="产品类型" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择" @change="handleProduct">
              <el-option
                v-for="item in productList"
                :label="item.indexTitle"
                :value="item.id"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="indexName">
            <el-input v-model="form.indexName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="内容" prop="indexContent">
            <el-input type="textarea" v-model="form.indexContent"></el-input>
          </el-form-item> -->
          <el-form-item label="上传LOGO" class="uploadimage">
            <upload-imgs
              :queryId="queryId"
              ref="uploadEle"
              :rules="rules"
              :imageFileList="logoFileList"
              @setForm="getLogoForm"
            />
          </el-form-item>
          <!-- <el-form-item label="上传图片" class="uploadimage">
            <upload-imgs
              :queryId="queryId"
              ref="uploadEle"
              :rules="rules"
              :imageFileList="imageFileList"
              @setForm="getForm"
            />
          </el-form-item> -->
          <el-form-item label="排序" prop="indexSort">
            <el-input v-model="form.indexSort"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="action">
            <el-button @click="reset">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="dialogBanner" title="banner设置">
        <el-form ref="formRules" label-width="120px" :model="formBanner" :rules="formBannerRules">
          <el-form-item label="标题" prop="indexName">
            <el-input v-model="formBanner.indexName"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="indexContent">
            <el-input type="textarea" v-model="formBanner.indexContent"></el-input>
          </el-form-item>
          <el-form-item label="上传图片" class="uploadimage">
            <upload-imgs
              :queryId="queryId"
              ref="uploadEle"
              :rules="rules"
              :imageFileList="imageBannerFileList"
              @setForm="getBannerForm"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="action">
            <el-button @click="resetBanner">取消</el-button>
            <el-button type="primary" @click="submitBanner">提交</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <el-image-viewer
      hide-on-click-modal
      @close="()=>{showViewer = false}"
      v-if="showViewer && viewFileList.length>0"
      :url-list="viewFileList"
      :initial-index="0"
    />
  </div>
</template>

<script>
import UploadImgs from "@/components/UploadImg/index.vue";
import {
  menuGetModuleContent,
  deleteMenu,
  addOrUpdateMenu,
  getTradeStatus,
  getSolutionBanner
} from "@/api/PC-Home.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "ImgsUploadStage",
  components: {
    UploadImgs
  },
  data() {
    return {
      form: {
        parentId: "",
        indexName: "",
        indexContent: "",
        indexSort: "",
        tradeId: "",
        productId: ""
      },
      formRules: {
        indexName: [
          { required: true, message: "请输入文章标题", trigger: "blur" }
        ],
        indexContent: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ],
        tradeId: [{ required: true, message: "请选择行业", trigger: "change" }],
        productId: [
          { required: true, message: "请选择产品", trigger: "change" }
        ],
        indexSort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      dialogTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      rules: {
        maxSize: 1,
        minWidth: 100,
        minHeight: 100
      },
      tableData: [],
      showViewer: false,
      viewFileList: [],
      queryId: null,
      file: null,
      logoFile: null,
      imageFileList: [],
      logoFileList: [],
      tradeList: [],
      productList: [],
      dialogBanner: false,
      formBanner: {
        indexName: "",
        indexContent: ""
      },
      formBannerRules: {
        indexName: [
          { required: true, message: "请输入文章标题", trigger: "blur" }
        ],
        indexContent: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ]
      },
      imageBannerFileList: [],
      Bannerfile: null
    };
  },
  mounted() {
    this.getQueryId();
    this.getTradeManagement();
    this.getBanner();
  },
  methods: {
    returnImage(url) {
      return process.env.VUE_APP_URL + "/" + url;
    },
    getQueryId() {
      this.queryId = this.$route.query.queryId;
    },
    showBigImage(url) {
      this.viewFileList = [];
      this.showViewer = true;
      this.viewFileList.push(process.env.VUE_APP_URL + "/" + url);
    },
    getForm(value) {
      console.log(value);
      this.file = value;
    },
    getLogoForm(value) {
      this.logoFile = value;
    },
    reset() {
      this.dialogFormVisible = false;
    },
    resetBanner() {
      this.dialogBanner = false;
    },
    // 新增
    handleClick(str, row) {
      this.imageFileList = [];
      this.logoFileList = [];
      this.dialogFormVisible = true;
      this.dialogTitle = str;
      this.file = null;
      this.logoFile = null;
      if (str === "新增") {
        this.form.indexName = "";
        this.form.indexContent = "";
        this.form.indexSort = "";
        this.form.id = "";
      }
      if (str === "修改") {
        this.form.indexName = row.indexName;
        this.form.indexContent = row.indexContent;
        this.form.indexSort = row.indexSort;
        this.form.id = row.id;
        this.imageFileList.push({
          name: row.indexName,
          url: process.env.VUE_APP_URL + "/" + row.indexImg
        });
        this.logoFileList.push({
          name: row.indexTitle,
          url: process.env.VUE_APP_URL + "/" + row.indexTitle
        });
      }
    },
    menuGetModuleContent(tradeId, parentId) {
      this.imageFileList = [];
      let param = {
        id: tradeId + parentId + "005"
      };
      menuGetModuleContent(param).then(res => {
        if (res.data.length > 0) {
          this.tableData = res.data;
          // this.form.indexTitle = res.data[0].indexTitle;
          // this.form.indexContent = res.data[0].indexContent;
          // this.form.id = res.data[0].id;
          // this.imageFileList.push({
          //   name: res.data[0].indexTitle,
          //   url: process.env.VUE_APP_URL + "/" + res.data[0].indexImg
          // });
        }
      });
    },
    submit() {
      this.$refs.formRules.validate(validate => {
        if (validate) {
          let file = this.file;
          let form = null;
          form = new FormData();
          form.append("file", file ? file.raw : "");
          form.append(
            "parentId",
            this.form.tradeId + this.form.productId + "005"
          );
          form.append("indexName", this.form.indexName);
          form.append("file1", this.logoFile ? this.logoFile.raw : "");
          form.append("indexContent", this.form.indexContent);
          form.append("indexType", "img");
          form.append("indexSort", this.form.indexSort);
          form.append("id", this.form.id ? this.form.id : "");
          addOrUpdateMenu(form).then(res => {
            if (res.code === 200) {
              this.$message.success("上传成功");
              this.dialogFormVisible = false;
              this.menuGetModuleContent(this.form.tradeId, this.form.productId);
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    // 获取行业
    getTradeManagement() {
      let param = {
        id: 201
      };
      menuGetModuleContent(param).then(res => {
        this.tradeList = res.data;
      });
    },
    // 获取产品
    handleTrade(val) {
      this.form.productId = "";
      this.form.indexTitle = "";
      this.form.indexContent = "";
      this.form.id = "";
      this.imageFileList = [];
      let param = {
        id: val + "202"
      };
      getTradeStatus(param).then(res => {
        this.productList = res.data;
      });
    },
    handleProduct(val) {
      this.menuGetModuleContent(this.form.tradeId, val);
    },
    handleDelete(item) {
      ElMessageBox.confirm("是否删除该条信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let param = {
            id: item.id
          };
          deleteMenu(param).then(res => {
            if (res.code === 200) {
              ElMessage({
                type: "success",
                message: "删除成功"
              });
              this.menuGetModuleContent(this.form.tradeId, this.form.productId);
            }
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除"
          });
        });
    },
    // 上传banner
    openBanner() {
      this.dialogBanner = true;
    },
    getBannerForm(value) {
      console.log(value);
      this.Bannerfile = value;
    },
    getBanner() {
      this.imageBannerFileList = []
      let param = {
        id: "201001202001005"
      };
      getSolutionBanner(param).then(res => {
        this.formBanner.indexName = res.data.indexTitle;
        this.formBanner.indexContent = res.data.indexContent;
        this.formBanner.id = res.data.id;
        this.formBanner.parentId = res.data.parentId;
        this.imageBannerFileList.push({
          name: res.data.indexTitle,
          url: process.env.VUE_APP_URL + "/" + res.data.indexImg
        });
      });
    },
    submitBanner() {
      this.$refs.formRules.validate(validate => {
        if (validate) {
          let file = this.Bannerfile;
          let form = null;
          form = new FormData();
          form.append("file", file ? file.raw : "");
          form.append("parentId", this.formBanner.parentId);
          form.append("indexName", this.formBanner.indexName);
          form.append("indexContent", this.formBanner.indexContent);
          form.append("indexType", "img");
          form.append("indexSort", "");
          form.append("id", this.formBanner.id ? this.formBanner.id : "");
          addOrUpdateMenu(form).then(res => {
            if (res.code === 200) {
              this.$message.success("上传成功");
              this.dialogBanner = false;
              this.getBanner("201001202001005");
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    }
  }
};
</script>

    
<style scoped lang="scss">
.lin-wrap {
  padding: 40px 0;
  .wrap-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .label {
      font-size: 16px;
    }
  }
}
::v-deep .uploadimage {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .upload-demo {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;

      .el-upload {
        margin-right: 10px;
      }
    }
    .demo-image__preview {
      display: flex;
      flex-direction: row;
    }
  }
}
.action {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
